{% extends "base.html" %}
{% load static %}
{% load socialaccount %}
{% load web_extras %}
{% load features %}

{% block header %}
{% get_featured_game as featured_game %}
{% if featured_game %}
	<script type="text/javascript">
		{% include "joust_include.js" with featured_game=featured_game %}
	</script>
{% endif %}
{% endblock %}

{% block error_reporting %}
	{% comment %}Disable error reporting on front page (e.g. don't care about embedded Joust errors){% endcomment %}
{% endblock %}

{% block meta %}
{% with "Share your Hearthstone games - Watch them in any browser and show off your craziest plays!" as description %}
	{{ block.super }}
	<meta property="og:title" content="HSReplay.net" />
	<meta property="og:description" content="{{ description }}" />
	<meta property="og:image" content="{% static_absolute 'images/hsreplay-thumbnail.png' %}" />
	<meta property="og:image:width" content="400" />
	<meta property="og:image:height" content="400" />
	<meta name="description" content="{{ description }}" />
	<meta name="twitter:card" content="summary" />
{% endwith %}
{% endblock %}

{% block content %}
<div id="joust-lightbox">
	<div id="joust-promo-container"></div>
</div>
<div id="home">
	<header id="promo" class="promo">
		<div class="container">
			<img src="{% static 'images/logo.png' %}" id="logo" alt="HSReplay"/>
			<h1>HSReplay.net</h1>
			<p class="tagline">Share your Hearthstone games!</p>
			{% if user.is_authenticated %}
				<p>
					<a href="{% url 'my_replays' %}" class="promo-button">My Replays</a>
					<a href="{% url 'account_edit' %}" class="promo-button-outline">
						<img src="{% static 'images/bnet.png' %}"/>
						<span>{{ user.username }}</span>
					</a>
				</p>
				<p>
					<a href="{% url 'downloads' %}" class="promo-link">Download Hearthstone Deck Tracker</a>
				</p>
			{% else %}
				{% include 'login_button.html' %}
				<p class="promo-help">
					You don't need a new account&mdash;we use <img src="{% static 'images/bnet.png' %}"/>
					<abbr title="We'll send you over to the official Battle.net site to log in there.&#10;HSReplay.net neither gains access to your email address nor your password.">Battle.net</abbr>.
				</p>
				{% if debug %}
					<a href="{% url 'account_login' %}" class="promo-link">(DEBUG) Log in with password</a>
				{% endif %}
			{% endif %}
		</div>
	</header>

	{% feature "archetypes" %}
		<div id="archetypes-promo" class="promo text-center">
			<h2>Now available:</h2>
			<a href="{% url 'deck_archetypes' %}" class="promo-button">Archetypes</a>
		</div>
	{% endfeature %}

	<article id="demo">
		<div class="container">
			<div class="row">
				<div class="col-md-8 col-md-offset-2 col-xs-12 col-xs-offset-0">
					<header class="text-center">
						<h2>All your replays in one place.</h2>
						<p>
							Try out our super slick Hearthstone replayer:
						</p>
					</header>
					{% setting "FEATURED_GAME_ID" as featured_game %}
					<a href="{% if featured_game %}{% url 'games_replay_view' id=featured_game %}{% else %}{% static 'images/joust-screenshot.jpg' %}{% endif %}">
						<img src="{% static 'images/joust-thumbnail.jpg' %}" id="feat-joust-screenshot" alt="Joust: View your HSReplays"/>
					</a>
				</div>
			</div>
		</div>
	</article>

	<article id="features" class="promo">
		<div class="container">
			<div class="row">
				<div class="col-md-8 col-md-offset-2 col-xs-12 col-xs-offset-0">
					<figure class="front-feature">
						<img src="{% static 'images/front-feat-history.jpg' %}" alt="Match history" height="120" width="190" />
						<figcaption>
							<h2>Share your craziest moments</h2>
							<p>
								Your games are live on the site as soon as they finish.
								Find your best play and easily link it to all your friends.
							</p>
						</figcaption>
						<div class="clearfix"></div>
					</figure>

					<figure class="front-feature flip">
						<img src="{% static 'images/front-feat-stats.jpg' %}" alt="Monthly statistics" height="120" width="190" />
						<figcaption>
							<h2>Analyze your gameplay</h2>
							<p>
								A clear game history, filterable per season, game type and more.
								Follow your progress to legend with wins and losses visible at a glance.
							</p>
						</figcaption>
						<div class="clearfix"></div>
					</figure>
				</div>
			</div>
		</div>
	</article>

	<article id="how-it-works">
		<div class="container">
			<h2 class="text-center">How it works</h2>
			<ul class="row home-steps">
				<li class="col-sm-6">
					<h3>Step 1:</h3>
					<p><a href="{% url 'downloads' %}" class="promo-button-outline text-uppercase">Download Deck Tracker</a></p>
					<p>Hearthstone Deck Tracker runs while you're in Hearthstone.<br />
					It will automatically upload your matches as you play them.</p>
				</li>
				<li class="col-sm-6">
					<h3>Step 2:</h3>
					<p><a href="https://battle.net/account/download/?show=hearthstone&style=hearthstone" class="promo-button-outline text-uppercase">Play Hearthstone</a></p>
					<p>Your full match history will always stay private.<br />
					Share individual games with your friends and show off your craziest plays!</p>
				</li>
			</ul>
		</div>
	</article>

	<article class="text-center promo">
		{% if user.is_authenticated %}
			<h2>You're all set!</h2>
			<p class="front-pad"><a href="{% url 'my_replays' %}" class="promo-button hero-button">View your replays</a></p>
		{% else %}
			<h2>Let's get started:</h2>
			<div class="front-pad">{% include 'login_button.html' %}</div>
		{% endif %}
	</article>

	<article id="faq">
		<div class="container">
			<h2>Frequently Asked Questions</h2>
			<div class="row">
				<div class="col-lg-6 col-xs-12">
					<dl>
						<dt>How do I sign in?</dt>
						<dd>Click on the "Log in with Battle.net" button and we'll send you to Battle.net. HSReplay.net does not have access to your password.</dd>
						<dt>Do I need to sign in?</dt>
						<dd>Not at all! Just <a href="{% url 'downloads' %}">download Hearthstone Deck Tracker</a> and use it to upload and share your replays. You can then connect your replays to your Battle.net account at any time.</dd>
						<dt>How do I share a replay?</dt>
						<dd>Simply send the link to your friends. You can also use the "Share" dialog on the replay page, where you can even set the specific turn to link to.</dd>
					</dl>
				</div>
				<div class="col-lg-6 col-xs-12">
					<dl>
						<dt>How do you know which cards the opponent was holding in his hand?</dt>
						<dd>Once a card is played from hand we can deduce when that card was drawn, discovered or created in any other way.</dd>
						<dt>Where can I get the latest news about HSReplay.net?</dt>
						{% setting 'HSREPLAY_TWITTER_HANDLE' as twitter_handle %}
						<dd>Follow us {% if twitter_handle %}<a href="https://twitter.com/{{ twitter_handle }}">@{{ twitter_handle }}</a> {% endif %}and subscribe to <a href="https://www.reddit.com/r/hsreplay">/r/hsreplay</a>.</dd>
						<dt>Can you show me statistics about my winrates/decks/matchups…</dt>
						<dd>Stay tuned!</dd>
					</dl>
				</div>
			</div>
		</div>
	</article>

	<footer>
		<p class="visible-xs text-center"><a href="#">&uparrow; Back to top</a></p>
	</footer>
</div>
{% endblock content %}
